<template>
  <div class="common-page f-c">
    <BackPage title="国有资产不动产列表" />
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.actualValue"
        :label="item.actualValue"
        :name="item.actualValue"
      />
    </el-tabs>
    <div class="search-params f-r a-c j-b">
      <el-form inline>
        <el-form-item label="单位名称：">
          <el-input clearable v-model="searchParams.unitName" />
        </el-form-item>
        <el-form-item label="房屋坐落地址：">
          <el-input clearable v-model="searchParams.hoseLocaltion" />
        </el-form-item>
        <el-form-item label="登记主体名称：">
          <el-input clearable v-model="searchParams.regUnit" />
        </el-form-item>
        <el-form-item label="补办节点：">
          <el-select clearable v-model="searchParams.nodePoint">
            <el-option v-for="item in options1" :key="item.id" :value="item.actualValue" :label="item.actualValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSearch">筛选</el-button>
          <el-button round @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="f-r j-e">
      <el-form>
        <el-form-item>
          <div class="f-r a-c">
            <el-button type="primary" round @click="onExport">导出</el-button>
            <ImportLoad url="/importData/uploadEstate" @success="onSearch" />
            <el-button type="primary" round @click="onAdd">新增</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box f-g">
      <el-table
        height="100%"
        border
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" width="80px" label="序号" align="center" />
        <el-table-column resizable show-overflow-tooltip v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
        <el-table-column label="操作" fixed="right" width="160px">
          <template slot-scope="scope">
            <el-button type="text" @click="onRead(scope.row)">查看详情</el-button>
            <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <ItemDetail ref="ItemDetailRef" :category-list="tabs" :node-list="options1"/>
    <ItemAdd ref="ItemAddRef" :category-list="tabs" :node-list="options1" @get-page="initData" />
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import ItemDetail from './detail'
import ItemAdd from './add'
import { http_assets } from '@/api'
import { exportFile } from '@/utils/request'
export default {
  name: 'Index',
  components: {
    ItemAdd,
    ItemDetail
  },
  mixins: [crud],
  data() {
    return {
      request: http_assets,
      searchParams: {
        unitName: '',
        regUnit: '',
        nodePoint: '',
        hoseLocaltion: ''
      },
      options1: [
      ],
      tabs: [],
      activeTab: '',
      columns: [
        { prop: 'unitName', label: '单位名称' },
        { prop: 'regUnit', label: '登记主体名称' },
        { prop: 'useUnit', label: '使用主体名称' },
        { prop: 'hoseLocaltion', label: '地址' },
        { prop: 'buildArea', label: '建筑面积（m²）' },
        { prop: 'landArea', label: '土地面积（m²）' },
        { prop: 'handlingType', label: '补办类型' },
        { prop: 'nodePoint', label: '补办节点' },
        { prop: 'problem', label: '存在问题' },
        { prop: 'mostNewProgress', label: '补办进度' }
      ],
      tableData: [],
      exportLoading: false
    }
  },
  created() {
    this.request.nodeList().then(res => {
      this.options1 = res.data
    })

    this.request.categoryList().then(res => {
      this.tabs = res.data.filter(el => el.actualValue)
      if (this.tabs && this.tabs.length) {
        this.activeTab = this.tabs[0].actualValue
        this.changeTab({
          name: this.tabs[0].actualValue
        })
      }
    })
  },
  methods: {
    initData() {
      if (!this.activeTab) return
      this.loading = true
      this.request.page({
        ...this.getQueryParams(),
        projectCategory: this.activeTab
      }).then(res => {
        res = res.data
        this.loading = false
        this.totalSize = res.total
        this.tableData = res.records
      })
    },
    onExport() {
      exportFile('exportData/downloadAssetEstate?projectCategory=' + this.activeTab)
    },
    changeTab(item) {
      this.activeTab = item.name
      this.initData()
    },
    onImport() {},
    onAdd() {
      this.$refs.ItemAddRef.open()
    },
    onEdit(item) {
      this.$refs.ItemAddRef.open(item)
    },
    onRead(item) {
      this.$refs.ItemDetailRef.open(item)
    }
  }
}
</script>

<style scoped lang="scss">
.tabs {
  height: 48px;
  background: #E6EDF5;
  border-radius: 24px 24px 24px 24px;
  padding: 0 16px;
  .tab-item  {
    height: 40px;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    color: #0A1629;
    line-height: 40px;
    font-size: 16px;
    &.active {
      background-color: #3F8CFF;
      color: #fff;
    }
  }
}

</style>
